<script src="${basepath}/plugin/qn_jssdk/plupload/plupload.full.min.js"></script>
<script src="${basepath}/plugin/qn_jssdk/qiniu.dev.js"></script>
<%var jstpl = {%>
<script>
    var form = layui.form;
    var laydate = layui.laydate;
    var  app =  new Vue({
        el:"#gexin_body",
        data:{
            product_list:${product_list!'[]'},
            query:{title:"",state:"",product_id:"",pageNumber:1,pageSize:10},
            data_result:[]
        },created:function(){
            this.loadPage("init")
        },methods:{
            loadPage:function(model){  //载入模式有两种  init初始化载入 load分页载入
                if(model=="init"){
                    this.query.pageNumber=1;
                }
                Ajax("/system/advertising/loadPageData",this.query,function(d){
                    if(!d.state){
                        gx.alert(d.msg);
                        return false;
                    }
                    if(d.data.list==null || d.data.list.size<=0 || d.data==null){
                        app.query.pageNumber=1;
                        app.data_result=[];
                        return false;
                    }
                    app.data_result=d.data.list;
                    if(d.data.firstPage==true){
                        layui.laypage.render({
                            elem: 'gexin_page' //注意，这里的 test1 是 ID，不用加 # 号
                            ,layout:['count', 'prev', 'page', 'next', 'limit', 'skip']
                            ,count: d.data.totalRow //数据总数，从服务端得到
                            ,limit:app.query.pageSize
                            ,jump: function(obj, first){
                                app.query.pageNumber=obj.curr;
                                if(app.query.pageSize!=obj.limit){
                                    app.query.pageSize=obj.limit;
                                    app.loadPage("init");
                                    return ;
                                }
                                if(!first){
                                    app.loadPage("load");
                                }
                            }
                        });
                    }
                })
            },
            selectImg:function (img) {
                gx.photos('封面图',img);
            },
            add_edit:function(type,obj){
                if(type>0){//修改
                    $("#compose-mail-title").text("修改广告");
                    $("#logo").attr("src",obj.cover_img+"?imageView2/1/w/345/h/135");
                    $("#cover_img_input_hidden").val(obj.cover_img);
                    $("#compose-mail-select").val(obj.product_id);
                    $("#date_time_range").val(obj.start_time+" - "+obj.end_time);
                    $("#compose-mail-sort").val(obj.sort);
                    $("#compose-mail-id").val(obj.id);
                }else{//添加
                    $("#compose-mail-title").text("添加广告");
                    $("#logo").attr("src","");
                    $("#cover_img_input_hidden").val("");
                    $("#compose-mail-select").val("");
                    $("#date_time_range").val("");
                    $("#compose-mail-sort").val("");
                    $("#compose-mail-id").val("");
                }
                form.render();
                $('#compose-mail').modal('show')
            },
            dels:function(id){
                gx.confirm("您是否确定删除此信息?",function () {
                    Ajax("/system/advertising/delete_ad",{'id':id},function (ret) {
                        if(ret.state){
                            gx.alerts(ret.msg,function () {
                                app.loadPage("load");
                                layer.closeAll();
                            })
                        }else{
                            gx.alert(ret.msg);
                        }
                    })
                })
            }

        }
    })

    //监听提交
    form.on('submit(formDemo)', function(data) {
        Ajax("/system/advertising/save",data.field,function (ret) {
            if(ret.state){
                gx.alerts(ret.msg,function(){
                    app.loadPage("init");
                    $('#compose-mail').modal('hide');
                    layer.closeAll();
                })
            }else{
                gx.alert(ret.msg);
            }
        })
    });

    laydate.render({
        elem: '#date_time_range',
        range:true,
        type: 'datetime',
        done: function (value, date, endDate) {
            $("#date_time_range").val(value);// = value;
        }
    });

    $(function(){
        imgupload({
            elm : "#logo_upload",		// 标签，类名或 ID 不能重复
            thumb_w : 345,		// 返回缩略图的宽度
            thumb_h : 135,		// 返回缩略图的高度
            fsize : 1.5,			// 图片大小限制（MB），默认 100MB
            rery : 3,			// 上传失败重试次数，默认 1
            multi : false,		// 上传多张
            UploadProgress : function(up,file){ },		// up：对象实例，file：文件上传信息
            FileUploaded : function(img,thumb){
                $("#logo").attr("src",thumb);
                $("#cover_img_input_hidden").val(img);
            }	// img：图片原图，thumb：缩略图
        });
    })
</script>
<%};%>
<%var csstpl = {%>
<style type="text/css">
    [v-cloak]{display:none}
</style>
<%};%>
<%layout("../layout/_layout_layui.html",{title:'广告管理',jstpl:jstpl,csstpl:csstpl}){ %>
<div class="layui-row"  v-cloak>
    <div class="layui-col-md12">




        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">商品</label>
                <div class="layui-input-block">
                    <select class="layui-input" v-model="query.product_id" >
                        <option value="">请选择商品</option>
                        <option  v-for="t in product_list" :value="t.id">{{t.product_name}}</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-col-md3">
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <select class="layui-input" v-model="query.state" >
                        <option value="">请选择状态</option>
                        <option value="0">正常</option>
                        <option value="1">禁用</option>
                    </select>
                </div>
            </div>
        </div>


        <div class="layui-col-md3">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-block" >
                        <button type="button" @click="loadPage('init')" class="layui-btn ">查询</button>
                        <a href="javascript:;" @click="add_edit(0,null)" class="layui-btn layui-btn-normal">添加</a>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="layui-col-md12" style="margin-top: 20px">
        <table class="layui-table">
            <thead>
            <tr>
                <th>序号</th>
                <th>封面图</th>
                <th>关联商品</th>
                <th>状态</th>
                <th>排序</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tbody_body">
            <tr v-for="d  in  data_result">
                <td>{{d.id}}</td>
                <td><img :src="d.cover_img" width="80" height="80" @click="selectImg(d.cover_img)"></td>
                <td>{{d.product_name}}</td>
                <td v-if="d.status==0" ><span class="layui-badge layui-bg-orange">未上线 </span></td>
                <td v-else-if="d.status==1" ><span class="layui-badge layui-bg-blue">上线中</span></td>
                <td v-else><span class="layui-badge layui-bg-red">已下线</span></td>
                <td>{{d.sort}}</td>
                <td class="action-col">
                    <div class="layui-btn-group" >
                        <a class="layui-btn layui-btn-primary layui-btn-sm" href="javascript:;" @click="add_edit(1,d)" >修改</a>
                        <a class="layui-btn layui-btn-primary layui-btn-sm" href="javascript:;" @click="dels(d.id)">删除</a>
                    </div>
                </td>
            </tr>
            <tr v-if="data_result.length==0">
                <td  colspan="6" style="text-align:center;height:300px"><h1>没有数据</h1></td>
            </tr>
            </tbody >
        </table>
        <fieldset id="gexin_page" class="layui-elem-field layui-field-title" >
        </fieldset>
    </div>


<!-- 弹出框开始  -->
<div class="modal fade" id="compose-mail" tabindex="-1" role="dialog"
     aria-hidden="true">
    <form id="add_saveform" class="layui-form form-horizontal ">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="compose-mail-title">
                    </h4>
                </div>
                <!-- 弹出框内容  -->
                <div class="modal-body">
                    <div class="layui-row layui-col-space15">

                        <div class="layui-form-item">
                            <label class="layui-form-label">封面图</label>
                            <div class="layui-input-inline">
                                <div class="layui-upload">
                                    <div class="layui-upload-list">
                                        <img class="layui-upload-img" id="logo">
                                        <p id="demoText">推荐尺寸：690×270</p>
                                    </div>
                                    <input type="hidden" name="a.cover_img" id="cover_img_input_hidden" >
                                    <button type="button" class="layui-btn" id="logo_upload">上传图片</button>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">商品</label>
                            <div class="layui-input-block">
                                <select class="layui-input" id="compose-mail-select" name="a.product_id" >
                                    <option value="">请选择商品</option>
                                    <option  v-for="pt in product_list" :value="pt.id" v-text="pt.product_name" ></option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">时间范围</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text"  id="date_time_range" lay-verType="tips"  lay-verify="required" placeholder="请选择时间范围" readonly name="date_time"   >
                            </div>
                        </div>



                        <div class="layui-form-item">
                            <label class="layui-form-label">排序</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="number" id="compose-mail-sort"  lay-verType="tips"  lay-verify="required" placeholder="请输入排序" name="a.sort"   >
                                <p class="layui-text" style="color: rgb(255, 87, 34);">数值越大越靠前</p>
                            </div>
                        </div>


                        <input  type="hidden" id="compose-mail-id"   name="a.id"   />

                    </div>

                </div>

                <div class="modal-footer">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                            <button type="button" data-dismiss="modal" class="layui-btn layui-btn-primary">关闭</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </form>
</div>
<!--  弹出框结束 -->

</div>
<%};%>